<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2023/10/9
  Time: 11:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <el-button type="success" size="small" @click="addRole">新增角色</el-button>
    <el-button type="success" size="small" @click="inittable">刷新表格</el-button>
    <el-table
            :data="tableData"
            style="width: 100%"
    >
        <el-table-column
                prop="roleid"
                label="ID"
                sortable
        >
        </el-table-column>
        <el-table-column
                prop="rolename"
                label="角色名"
        >
        </el-table-column>
        <el-table-column
                prop="remark"
                label="角色描述"
        >
        </el-table-column>
        <el-table-column
                prop="status"
                label="状态"
                sortable
        >
            <template slot-scope="scope">
                <el-tag
                        type="success"
                        v-if="scope.row.status==1"
                        effect="dark">
                    启用
                </el-tag>
                <el-tag
                        type="danger"
                        v-if="scope.row.status==0"
                        effect="dark">
                    禁用
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="500">
            <template slot-scope="scope">
                <el-button type="success" size="mini" @click="updateRole(scope.row)">编辑</el-button>
                <el-button type="danger" size="mini" @click="deleteRole(scope.row.roleid)">删除</el-button>
                <el-button type="warning" size="mini" @click="editQ(scope.row.roleid)">修改权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 10, 15]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <%--            角色新增的对话框--%>
    <el-dialog
            title="添加角色"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="角色名">
                <el-input v-model="form.rolename" placeholder="请输入角色名"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="form.remark" placeholder="请输入角色描述"></el-input>
            </el-form-item>
            <el-form-item label="角色状态">
                <el-select v-model="form.status" placeholder="--请选择--" size="small">
                    <el-option label="--请选择--" value="null"></el-option>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
        </el-form>
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
    <%--            角色修改的对话框--%>
    <el-dialog
            title="修改角色"
            :visible.sync="dialogVisible1"
            width="30%"
            :before-close="handleClose1">
        <el-form ref="form1" :model="form1" label-width="80px">
            <el-form-item label="角色名">
                <el-input v-model="form1.rolename" placeholder="请输入角色名"></el-input>
            </el-form-item>
            <el-form-item label="角色描述">
                <el-input v-model="form1.remark" placeholder="请输入角色描述"></el-input>
            </el-form-item>
            <el-form-item label="角色状态">
                <el-select v-model="form1.status" placeholder="--请选择--" size="small">
                    <el-option label="--请选择--" value="null"></el-option>
                    <el-option label="启用" :value="1"></el-option>
                    <el-option label="禁用" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" @click="onSubmit1">立即创建</el-button>
            <el-button @click="dialogVisible=false">取消</el-button>
        </el-form>
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

    <%--    修改权限的弹出框--%>
    <el-dialog
            title="修改权限"
            :visible.sync="dialogVisible2"
            width="30%"
            :before-close="handleClose2">
        <%--树形状--%>
        <el-tree
                :data="treeData"
                show-checkbox
                node-key="mid"
                ref="rootTree"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="comfirmQx">确 定</el-button>
  </span>
    </el-dialog>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            tableData: [],
            currentPage: 1,
            pageSize: 5,
            total: 1,
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible2: false,
            form: {},
            form1: {},
            //树形数据
            treeData:[],
            defaultProps: {
                children: 'children',
                label: 'mname'
            },
            defaultChecked:[],
            //被修改的角色id
            roleid:undefined,
        },
        created() {
            this.inittable()
        },
        methods: {
            //初始化表格
            inittable() {
                axios.post("/role/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize).then(function (resp) {
                    console.log(resp)
                    app.tableData = resp.data.data.list
                    app.total = resp.data.data.total
                })
            },
            //    改变页面大小的函数
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },
            //    改变显示页码的函数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            //    新增角色的按钮
            addRole() {
                app.dialogVisible = true
            },
            //    添加页面确认按钮
            onSubmit() {
                axios.post("/role/add", this.form).then(function (resp) {
                    if (resp.data === 1) {
                        app.inittable()
                    }
                    app.dialogVisible = false
                })
            },
            // 点击修改按钮
            updateRole(row) {
                app.dialogVisible1 = true;
                app.form1 = row;
            },
            //修改确认按钮
            onSubmit1() {
                axios.post("/role/update", this.form1).then(function (resp) {
                    if (resp.data === 1) {
                        app.inittable()
                    }
                    app.dialogVisible1 = false
                })
            },
            //修改权限按钮
            editQ(roleid) {
                this.roleid = roleid;
                this.dialogVisible2=true;
            //    向后台发送请求，获取所有树形数据以及当前角色具有的权限id
                axios.get("/menu/list?roleid="+roleid).then(resp=>{
                    this.treeData=resp.data.data.firsts;
                    setTimeout(() =>{
                        resp.data.data.mids.forEach(value => {
                            this.$refs.rootTree.setChecked(value, true, false);
                        })}, 100)
                })
            },
            //确定修改权限按钮
            comfirmQx(){
                var checkedKeys = this.$refs.rootTree.getCheckedKeys();
                var halfCheckedKeys = this.$refs.rootTree.getHalfCheckedKeys();
                console.log(checkedKeys)
                console.log(halfCheckedKeys)
                var ids=checkedKeys.concat(halfCheckedKeys);
                console.log(ids)
                axios.post("/menu/confirmQx?roleid="+this.roleid+"&ids="+ids).then(resp=>{
                    this.$message.success("分配角色权限成功");
                    this.dialogVisible2=false;
                })

            },
            //关闭页面
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleClose1(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleClose2(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            //删除角色
            deleteRole(roleid) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get("/role/delete?roleid=" + roleid).then(function (resp) {
                        var data = resp.data;
                        if (data === 1) {
                            app.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            app.inittable()
                        }
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

        },

    })
</script>

</body>

</html>
